<style scoped>
@import '../assets/css/home.css';
</style>

<template>
  <el-container>
    <el-aside width="220px">
      <!-- <el-row class="tac"> -->
      <!-- <el-col :span="12"> -->
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" :router="true">
        <div class="picture"><img class="logo" src="../assets/img/logo.png" alt=""></div>
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/book">
          <i class="el-icon-menu"></i>
          <span slot="title">图书管理</span>
        </el-menu-item>
        <el-menu-item index="/borrow">
          <i class="el-icon-document"></i>
          <span slot="title">借阅中心</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <i class="el-icon-setting"></i>
          <span slot="title">用户中心</span>
        </el-menu-item>
        <el-menu-item index="/system">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item>

      </el-menu>

    </el-aside>
    <el-container style="min-height: 100vh;">
      <!-- 这里开始 -->
      <template>
        <div id="app">
          <h1>图书馆管理系统</h1>

          <!-- 功能选项卡 -->
          <div class="tabs">
            <button v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }"
              @click="currentTab = index">
              {{ tab.title }}
            </button>
          </div>

          <!-- 功能内容区域 -->
          <div class="content">
            <!-- 借阅模块 -->
            <div v-show="currentTab === 0">
              <h2>借阅图书</h2>
              <input v-model="borrowBookId" placeholder="图书 ID" class="input-field">
              <input v-model="borrowUserId" placeholder="用户 ID" class="input-field">
              <button @click="handleBorrow" class="action-btn">
                立即借阅
              </button>
              <p v-if="borrowMessage" class="message">{{ borrowMessage }}</p>
            </div>

            <!-- 归还模块 -->
            <div v-show="currentTab === 1">
              <h2>归还图书</h2>
              <input v-model="returnBookId" placeholder="图书 ID" class="input-field">
              <input v-model="returnUserId" placeholder="用户 ID" class="input-field">
              <button @click="handleReturn" class="action-btn">
                立即归还
              </button>
              <p v-if="returnMessage" class="message">{{ returnMessage }}</p>
            </div>

            <!-- 续借模块 -->
            <div v-show="currentTab === 2">
              <h2>续借图书</h2>
              <input v-model="renewBookId" placeholder="图书 ID" class="input-field">
              <input v-model="renewUserId" placeholder="用户 ID" class="input-field">
              <button @click="handleRenew" class="action-btn">
                申请续借
              </button>
              <p v-if="renewMessage" class="message">{{ renewMessage }}</p>
            </div>

            <!-- 预约模块 -->
            <div v-show="currentTab === 3">
              <h2>预约图书</h2>
              <input v-model="reserveBookId" placeholder="图书 ID" class="input-field">
              <input v-model="reserveUserId" placeholder="用户 ID" class="input-field">
              <button @click="handleReserve" class="action-btn">
                立即预约
              </button>
              <p v-if="reserveMessage" class="message">{{ reserveMessage }}</p>
            </div>
          </div>
        </div>
      </template>

      <!-- <el-footer>友情链接</el-footer> -->
    </el-container>
  </el-container>
</template>
<!-- new -->


<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { title: '借阅' },
        { title: '归还' },
        { title: '续借' },
        { title: '预约' }
      ],
      // 借阅模块数据
      borrowBookId: '',
      borrowUserId: '',
      borrowMessage: '',
      // 归还模块数据
      returnBookId: '',
      returnUserId: '',
      returnMessage: '',
      // 续借模块数据
      renewBookId: '',
      renewUserId: '',
      renewMessage: '',
      // 预约模块数据
      reserveBookId: '',
      reserveUserId: '',
      reserveMessage: ''
    };
  },
  methods: {
    // 借阅处理
    handleBorrow() {
      this.borrowMessage = `已为用户 ${this.borrowUserId} 借阅图书 ${this.borrowBookId}，请按时归还。`;
      // 实际应用中调用后端接口
    },
    // 归还处理
    handleReturn() {
      this.returnMessage = `用户 ${this.returnUserId} 已成功归还图书 ${this.returnBookId}，未逾期，无费用。`;
      // 实际应用中调用后端接口
    },
    // 续借处理
    handleRenew() {
      this.renewMessage = `用户 ${this.renewUserId} 续借图书 ${this.renewBookId} 申请已通过，借阅期限已更新。`;
      // 实际应用中调用后端接口
    },
    // 预约处理
    handleReserve() {
      this.reserveMessage = `用户 ${this.reserveUserId} 已成功预约图书 ${this.reserveBookId}，我们会按序通知您。`;
      // 实际应用中调用后端接口
    }
  }
};
</script>

<style scoped>
#app {
  font-family: 'Segoe UI', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tabs button {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.tabs button.active {
  background: #42b983;
  color: white;
  font-weight: bold;
}

.content {
  text-align: left;
}

h2 {
  margin-bottom: 15px;
  color: #333;
}

.input-field {
  padding: 8px;
  margin: 8px 0;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.action-btn {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.action-btn:hover {
  background: #3eaf7c;
}

.message {
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
}

.message.success {
  background: #dff0d8;
  color: #3c763d;
}

.message.error {
  background: #f2dede;
  color: #a94442;
}
</style>